<div class="row">

    <div class="col">
        <div class="dropdown">
            <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              班级
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" *ngFor="let s of sl"  (click)="onStudentSelect(s)">{{s.name}}</a>
            </div>
          </div>
      </div>

      <div class="col">
          <div class="dropdown">
              <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               课程
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                <a class="dropdown-item" *ngFor="let b of bl" (click)="onBookSelect(b)">{{b.name}}</a>
              </div>
            </div>
      </div>

      <div class="col">
          <div class="dropdown">
              <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              教室
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                <a class="dropdown-item" *ngFor="let m of ml" (click)="onClassroomSelect(m)">{{m.name}}</a>
              </div>
            </div>
      </div>

      <div class="col">
          <div class="dropdown">
              <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             教师
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                <a class="dropdown-item" *ngFor="let r of rl" (click)="onTeacherSelect(r)">{{r.name}}</a>
              </div>
            </div>
      </div>

  </div>

  
<table class="table table-bordered table-striped table-hover" style="height: 450px">
    <thead>
       <tr>
          <th scope="col"></th>
           <th scope="col">星期一</th> 
           <th scope="col">星期二</th>
            <th scope="col">星期三</th> 
            <th scope="col">星期四</th> 
            <th scope="col">星期五</th> 
           </tr> </thead>
            <tbody style="text-align: center;">
              <tr style="height: 80px">
               <th scope="row">1-2节 </th>
                <td >
                   <div *ngIf="cl[0]" >
                      <p>{{cl[0].id}}</p>
                       <p>{{cl[0].name}}</p>
                       <p>{{cl[0].student}}</p>
                       <p>{{cl[0].classroom}}</p>
                       <p>{{cl[0].teacher}}</p>
                     </div>
                </td> 
                <td id="table_2_1">
                   <div *ngIf="cl[5]" >
                       <p>{{cl[5].id}}</p>
                       <p>{{cl[5].name}}</p>
                       <p>{{cl[5].student}}</p>
                       <p>{{cl[5].classroom}}</p>
                       <p>{{cl[5].teacher}}</p>
                     </div>        
 
 
 
                </td> 
                <td id="table_3_1">
                   <div *ngIf="cl[10]" >
                       <p>{{cl[10].id}}</p>
                       <p>{{cl[10].name}}</p>
                       <p>{{cl[10].student}}</p>
                       <p>{{cl[10].classroom}}</p>
                       <p>{{cl[10].teacher}}</p>
                     </div>      
 
 
                </td>
                 <td id="table_4_1">
                     <div *ngIf="cl[15]" >
                         <p>{{cl[15].id}}</p>
                         <p>{{cl[15].name}}</p>
                         <p>{{cl[15].student}}</p>
                         <p>{{cl[15].classroom}}</p>
                         <p>{{cl[15].teacher}}</p>
                       </div>    
 
                 </td> 
                 <td id="table_5_1">
                     <div *ngIf="cl[20]" >
                         <p>{{cl[20].id}}</p>
                         <p>{{cl[20].name}}</p>
                         <p>{{cl[20].student}}</p>
                         <p>{{cl[20].classroom}}</p>
                         <p>{{cl[20].teacher}}</p>
                       </div>    
 
                 </td> 
               </tr>
                <tr style="height: 80px"> 
                 <th scope="row">3-4节 </th> 
                 <td id="table_1_2">
                     <div *ngIf="cl[1]" >
                         <p>{{cl[1].id}}</p>
                         <p>{{cl[1].name}}</p>
                         <p>{{cl[1].student}}</p>
                         <p>{{cl[1].classroom}}</p>
                         <p>{{cl[1].teacher}}</p>
                       </div>
 
 
 
                 </td> 
                 <td id="table_2_2">
                     <div *ngIf="cl[6]" >
                         <p>{{cl[6].id}}</p>
                         <p>{{cl[6].name}}</p>
                         <p>{{cl[6].student}}</p>
                         <p>{{cl[6].classroom}}</p>
                         <p>{{cl[6].teacher}}</p>
                       </div>        
   
 
 
 
                 </td>
                  <td id="table_3_2">
                     <div *ngIf="cl[10]" >
                         <p>{{cl[11].id}}</p>
                         <p>{{cl[11].name}}</p>
                         <p>{{cl[11].student}}</p>
                         <p>{{cl[11].classroom}}</p>
                         <p>{{cl[11].teacher}}</p>
                       </div>      
 
                  </td>
                   <td id="table_4_2">
                       <div *ngIf="cl[16]" >
                           <p>{{cl[16].id}}</p>
                           <p>{{cl[16].name}}</p>
                           <p>{{cl[16].student}}</p>
                           <p>{{cl[16].classroom}}</p>
                           <p>{{cl[16].teacher}}</p>
                         </div>    
 
 
 
                   </td> 
                   <td id="table_5_2">
 
                       <div *ngIf="cl[21]" >
                           <p>{{cl[21].id}}</p>
                           <p>{{cl[21].name}}</p>
                           <p>{{cl[21].student}}</p>
                           <p>{{cl[21].classroom}}</p>
                           <p>{{cl[21].teacher}}</p>
                         </div>    
 
                   </td> 
                 </tr>
                  <tr style="height: 80px">
                    <th scope="row">5-6节 </th>
                     <td id="table_1_3">
                         <div *ngIf="cl[2]" >
                             <p>{{cl[2].id}}</p>
                             <p>{{cl[2].name}}</p>
                             <p>{{cl[2].student}}</p>
                             <p>{{cl[2].classroom}}</p>
                             <p>{{cl[2].teacher}}</p>
                           </div>
 
 
 
 </td>
 
 <td id="table_2_3">
     <div *ngIf="cl[6]" >
         <p>{{cl[7].id}}</p>
         <p>{{cl[7].name}}</p>
         <p>{{cl[7].student}}</p>
         <p>{{cl[7].classroom}}</p>
         <p>{{cl[7].teacher}}</p>
       </div>      
 
 </td> 
 <td id="table_3_3">
     <div *ngIf="cl[10]" >
         <p>{{cl[12].id}}</p>
         <p>{{cl[12].name}}</p>
         <p>{{cl[12].student}}</p>
         <p>{{cl[12].classroom}}</p>
         <p>{{cl[12].teacher}}</p>
       </div>    
 
 
 </td>
  <td id="table_4_3">
     <div *ngIf="cl[17]" >
         <p>{{cl[17].id}}</p>
         <p>{{cl[17].name}}</p>
         <p>{{cl[17].student}}</p>
         <p>{{cl[17].classroom}}</p>
         <p>{{cl[17].teacher}}</p>
       </div>    
 
 
  </td> 
  <td id="table_5_3">
     <div *ngIf="cl[22]" >
         <p>{{cl[22].id}}</p>
         <p>{{cl[22].name}}</p>
         <p>{{cl[22].student}}</p>
         <p>{{cl[22].classroom}}</p>
         <p>{{cl[22].teacher}}</p>
       </div>    
 
 
  </td> 
 </tr> 
 
 <tr style="height: 80px"> 
   <th scope="row">7-8节 </th>
   
   <td id="table_1_4">
       <div *ngIf="cl[3]" >
           <p>{{cl[3].id}}</p>
           <p>{{cl[3].name}}</p>
           <p>{{cl[3].student}}</p>
           <p>{{cl[3].classroom}}</p>
           <p>{{cl[3].teacher}}</p>
         </div>
 
   </td>
   
   <td id="table_2_4">
       <div *ngIf="cl[8]" >
           <p>{{cl[8].id}}</p>
           <p>{{cl[8].name}}</p>
           <p>{{cl[8].student}}</p>
           <p>{{cl[8].classroom}}</p>
           <p>{{cl[8].teacher}}</p>
         </div>      
 
   </td>
   
   <td id="table_3_4">
       <div *ngIf="cl[13]" >
           <p>{{cl[13].id}}</p>
           <p>{{cl[13].name}}</p>
           <p>{{cl[13].student}}</p>
           <p>{{cl[13].classroom}}</p>
           <p>{{cl[13].teacher}}</p>
         </div>    
 
   </td>
   
   <td id="table_4_4">
 
       <div *ngIf="cl[18]" >
           <p>{{cl[18].id}}</p>
           <p>{{cl[18].name}}</p>
           <p>{{cl[18].student}}</p>
           <p>{{cl[18].classroom}}</p>
           <p>{{cl[18].teacher}}</p>
         </div>    
 
   </td> 
   
   <td id="table_5_4">
       <div *ngIf="cl[23]" >
           <p>{{cl[23].id}}</p>
           <p>{{cl[23].name}}</p>
           <p>{{cl[23].student}}</p>
           <p>{{cl[23].classroom}}</p>
           <p>{{cl[23].teacher}}</p>
         </div>      
   
   
   </td>
 
 </tr>
  <tr style="height: 80px">
 
    <th scope="row">9-10节 </th>
 
     <td id="table_1_5">
         <div *ngIf="cl[4]" >
             <p>{{cl[4].id}}</p>
             <p>{{cl[4].name}}</p>
             <p>{{cl[4].student}}</p>
             <p>{{cl[4].classroom}}</p>
             <p>{{cl[4].teacher}}</p>
           </div>
   
 
 
     </td> 
 
     <td id="table_2_5">
 
         <div *ngIf="cl[9]" >
             <p>{{cl[9].id}}</p>
             <p>{{cl[9].name}}</p>
             <p>{{cl[9].student}}</p>
             <p>{{cl[9].classroom}}</p>
             <p>{{cl[9].teacher}}</p>
           </div>      
 
     </td> 
 
     <td id="table_3_5">
         <div *ngIf="cl[14]" >
             <p>{{cl[14].id}}</p>
             <p>{{cl[14].name}}</p>
             <p>{{cl[14].student}}</p>
             <p>{{cl[14].classroom}}</p>
             <p>{{cl[14].teacher}}</p>
           </div>    
 
 
     </td>
 
      <td id="table_4_5">
         <div *ngIf="cl[19]" >
             <p>{{cl[19].id}}</p>
             <p>{{cl[19].name}}</p>
             <p>{{cl[19].student}}</p>
             <p>{{cl[19].classroom}}</p>
             <p>{{cl[19].teacher}}</p>
           </div>    
 
 
      </td>
 
       <td id="table_5_5"> 
           <div *ngIf="cl[24]" >
               <p>{{cl[24].id}}</p>
               <p>{{cl[24].name}}</p>
               <p>{{cl[24].student}}</p>
               <p>{{cl[24].classroom}}</p>
               <p>{{cl[24].teacher}}</p>
             </div>   
 
 
       </td>
 
      </tr> 
 
     </tbody> 
   </table>
 